<template>
	<view class="content">
		<view class="tabbar">
			<image class="topBg" src="../../../static/image/mine/mask/image_bg.png"></image>
			<view class="topTitleView">
				<image class="topBack" src="../../../static/image/mine/mask/icon_back.png" @click="back()"></image>
				<text>任务中心</text>
			</view>
			<view class="signInView">
				<!-- title -->
				<view class="signInView_head">
					<view class="signInView_head_L">
						<text class="signInView_head_L_T1">已连续签到{{ signInDay }}天</text>
						<text class="signInView_head_L_T2">明日签到可得{{ dou[signInDay] }}爱豆</text>
					</view>
					<image src="../../../static/image/mine/mask/icon_exchange.png" @click="toChange()"></image>
				</view>
				<!-- 周签区域 -->
				<view class="aiDouView">
					<view class="aiDouItem ML48">
						<image v-if="signInDay < 1" src="../../../static/image/mine/mask/icon_signIn1_no.png"></image>
						<image class="signed" v-if="signInDay >= 1" src="../../../static/image/mine/mask/icon_signIn1.png"></image>
						<text v-if="signInDay < 1" style="color: #808080;">一天</text>
						<text v-if="signInDay >= 1" style="color: #FF8E08;">一天</text>
					</view>
					<view class="aiDouItem">
						<image v-if="signInDay < 2" src="../../../static/image/mine/mask/icon_signIn1_no.png"></image>
						<image class="signed" v-if="signInDay >= 2" src="../../../static/image/mine/mask/icon_signIn1.png"></image>
						<text v-if="signInDay < 2" style="color: #808080;">二天</text>
						<text v-if="signInDay >= 2" style="color: #FF8E08;">二天</text>
					</view>
					<view class="aiDouItem">
						<image v-if="signInDay < 3" src="../../../static/image/mine/mask/icon_signIn1_no.png"></image>
						<image class="signed" v-if="signInDay >= 3" src="../../../static/image/mine/mask/icon_signIn1.png"></image>
						<text v-if="signInDay < 3" style="color: #808080;">三天</text>
						<text v-if="signInDay >= 3" style="color: #FF8E08;">三天</text>
					</view>
					<view class="aiDouItem">
						<image v-if="signInDay < 4" src="../../../static/image/mine/mask/icon_signIn2_no.png"></image>
						<image class="signed" v-if="signInDay >= 4" src="../../../static/image/mine/mask/icon_signIn2.png"></image>
						<text v-if="signInDay < 4" style="color: #808080;">四天</text>
						<text v-if="signInDay >= 4" style="color: #FF8E08;">四天</text>
					</view>
					<view class="aiDouItem">
						<image v-if="signInDay < 5" src="../../../static/image/mine/mask/icon_signIn1_no.png"></image>
						<image class="signed" v-if="signInDay >= 5" src="../../../static/image/mine/mask/icon_signIn1.png"></image>
						<text v-if="signInDay < 5" style="color: #808080;">五天</text>
						<text v-if="signInDay >= 5" style="color: #FF8E08;">五天</text>
					</view>
					<view class="aiDouItem">
						<image v-if="signInDay < 6" src="../../../static/image/mine/mask/icon_signIn1_no.png"></image>
						<image class="signed" v-if="signInDay >= 6" src="../../../static/image/mine/mask/icon_signIn1.png"></image>
						<text v-if="signInDay < 6" style="color: #808080;">六天</text>
						<text v-if="signInDay >= 6" style="color: #FF8E08;">六天</text>
					</view>
					<view class="aiDouItem MR48">
						<image v-if="signInDay < 7" src="../../../static/image/mine/mask/icon_signIn3_no.png"></image>
						<image class="signed" v-if="signInDay >= 7" src="../../../static/image/mine/mask/icon_signIn3.png"></image>
						<text v-if="signInDay < 7" style="color: #808080;">七天</text>
						<text v-if="signInDay >= 7" style="color: #FF8E08;">七天</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 任务区域 -->
		<view class="maskView">
			<view class="maskHead">
				<view class="ge"></view>
				<text>每日任务</text>
			</view>
			<view class="maskItem MT60" v-for="(item, index) in tasks" :key="index">
				<image class="ML38" :src="item.img" style="width: 81rpx;height: 81rpx;"></image>
				<view class="maskItem_center">
					<text class="maskItem_center_T1">{{ item.taskName }}</text>
					<text class="maskItem_center_T2">{{ item.detail }}</text>
					<text class="maskItem_center_T3">爱豆+{{ item.reword }}</text>
				</view>
				<image
					v-if="!item.state"
					class="MR45"
					src="../../../static/image/mine/mask/icon_tofinish.png"
					style="width: 132rpx;height: 50rpx;"
					@click="toFinish(index)"
				></image>
				<image v-else class="MR45" src="../../../static/image/mine/mask/icon_finish.png" style="width: 132rpx;height: 50rpx;"></image>
				<view class="line"></view>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/login';
export default {
	data() {
		return {
			signInDay: 0, //签到天数
			dou: [1, 1, 1, 2, 1, 1, 3],
			isFinish1: false,
			isFinish2: false,
			isFinish3: false,
			tasks: [], //任务列表
			taskImgs: ['../../../static/image/mine/mask/icon_share.png', '../../../static/image/mine/mask/icon_message.png', '../../../static/image/mine/mask/icon_detection.png']
		};
	},
	onLoad() {
		this.getMainDetail();
	},
	// 监听返回
	onBackPress() {
		uni.switchTab({
			url: '../mine'
		});
		return true;
	},
	methods: {
		getMainDetail() {
			let that = this;
			// 获取签到信息
			let data = {
				userId: that.$store.state.userInfo.currentUser.userId,
				action: 'getState'
			};
			api.userTask(data)
				.then(function(res) {
					console.log(res);
					if (res.data.code == 2000) {
						res.data.data.task.forEach((item, index) => {
							item.img = that.taskImgs[index];
						});
						that.tasks = res.data.data.task;
						that.signInDay = res.data.data.userSignIn.userSignRecord.length;
					}
				})
				.catch(function(error) {
					console.log('getuserTask fail', error);
				});
		},
		back() {
			console.log('back');
			uni.switchTab({
				url: '../mine'
			});
		},
		// 去兑换   去商城
		toChange() {
			uni.switchTab({
				url: '../../shopMall/shopMall'
			});
		},
		//完成任务
		toFinish(flag) {
			console.log(this.tasks[flag]);
			if (this.tasks[flag].taskName == '监测达人') {
				// 监测达人
				uni.switchTab({
					url: '../../detection/detection'
				});
			} else if (this.tasks[flag].taskName == '分享资讯') {
				// 分享资讯
				uni.switchTab({
					url: '../../square/square'
				});
			} else if (this.tasks[flag].taskName == '分享报告') {
				// 分享报告
				uni.navigateTo({
					url: '../../detection/historyReport/historyReport'
				});
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* 顶部导航栏 */
.tabbar {
	width: 750rpx;
	height: 349rpx;
	position: relative;
}

.topBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.topTitleView {
	position: absolute;
	width: 100%;
	height: auto;
	margin-top: 76rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color: #00BA0C; */
}
.topTitleView text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #ffffff;
}
.topBack {
	position: absolute;
	left: 32rpx;
	width: 114rpx;
	height: 37rpx;
}
/* 签到区域 */
.signInView {
	position: absolute;
	top: 162rpx;
	left: 19rpx;
	width: 712rpx;
	height: 360rpx;
	border-radius: 15px;
	background-color: white;
}
/* 头部 */
.signInView_head {
	margin-top: 42rpx;
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.signInView_head image {
	margin-right: 28rpx;
	width: 181rpx;
	height: 64rpx;
}
.signInView_head_L {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	margin-left: 28rpx;
}
.signInView_head_L_T1 {
	font-size: 40rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}
.signInView_head_L_T2 {
	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
	opacity: 0.7;
}
.aiDouView {
	margin-top: 38rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.aiDouItem {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.ML48 {
	margin-left: 48rpx;
}
.MR48 {
	margin-right: 48rpx;
}
.MB90 {
	margin-bottom: 90rpx;
}
.aiDouView image {
	width: 76rpx;
	height: 111rpx;
}
.signed {
	animation: rotate .5s ease;
}
@keyframes rotate{
	from{
		transform: rotateY(0deg);
	}
	to{
		transform: rotateY(360deg);
	}
}
.aiDouView text {
	margin-top: 15rpx;
	font-size: 20rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ff8e08;
}
/* 任务区域   */
.maskView {
	margin-top: 215rpx;
	width: 712rpx;
	border-radius: 15px;
	background-color: #ffffff;
}
.maskHead {
	margin: 45rpx auto auto 40rpx;
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.ML38 {
	margin-left: 38rpx;
}
.MR45 {
	margin-right: 45rpx;
}
.MT60 {
	margin-top: 60rpx;
}
.MT32 {
	margin-top: 32rpx;
}
.maskItem {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
}
/* 中间文字 */
.maskItem_center {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 20rpx;
	margin-left: 20rpx;
}
.maskItem_center_T1 {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.maskItem_center_T2 {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
	opacity: 0.5;
}
.maskItem_center_T3 {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #fbb11b;
}
.ge {
	width: 6rpx;
	height: 36rpx;
	background-color: #fbb11b;
	border-radius: 15px;
}
.maskHead text {
	margin-left: 20rpx;
	font-size: 40rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}
.line {
	position: absolute;
	width: 530rpx;
	height: 2rpx;
	background-color: #eeeeee;
	bottom: 0rpx;
	right: 40rpx;
}
</style>
